<template>
  <div class="active-interception-left">
    <dx-Wrap class="l-t" :name="'涉诈类型分布'" style="height: 30%">
      <template v-slot:content>
        <div class="chart-container" ref="pieChart"></div>
      </template>
    </dx-Wrap>
    <dx-Wrap class="l-b" :name="'街道风险类型分布'" style="height: 70%">
      <template v-slot:content>
        <div id="person-container" ref="barChart"></div>
      </template>
    </dx-Wrap>
  </div>
</template>

<script>
import _ from "lodash";
import * as request from '@/utils/request/request'
import dxWrap from "@/components/customComponents/dxWrap.component.vue";
import * as echarts from 'echarts';
import API from "@/api/index.api";

export default {
  name: 'activeInterceptionLeft',
  components: {
    dxWrap
  },
  data () {
    return {
      chartData: [
        { value: 235, name: '45岁以上投资理财' },
        { value: 274, name: '退休、高收入、独居老人' },
        { value: 310, name: '新增实有人口' },
        { value: 60, name: '其他' }
      ],
      chart: null,
      barChart: null,
      barlegend:[],
      baryAxis:[],
    }
  },
  methods: {
    initActive () {
      API.active_fraud_type().then(res=>{
        this.chartData=res.content;
        this.initChart ();
      })
      API.active_street_type().then(res=>{
        console.log(res);
        this.barlegend=res.content.legend;
        this.baryAxis=res.content.yAxis;
        this.initBarChart()
      })
    },
    initChart() {
      this.chart = echarts.init(this.$refs.pieChart);
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: '5%',
          top: '5%',
          data: this.chartData.map(item => item.name),
          textStyle: {
            color: '#fff',
            fontSize: 12,
          }
        },
        color: ['#c1c126', '#fdb103', '#03ab30', '#0fb3cc'],
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: true,
            label: {
              show: false,
              position: 'outside',
              // formatter: '{a|{b}：{d}%}\n{hr|}',
              formatter: function(params) {
                // 使用 \n 实现换行
                return `${params.name}\n${params.percent}%`;
              },

              rich: {
                hr: {
                  backgroundColor: 't',
                  borderRadius: 3,
                  width: 3,
                  height: 3,
                  padding: [3, 3, 0, -12]
                },
                a: {
                  padding: [-30, 15, -20, 15]
                }
              }
            },
            labelLine: {
              normal: {
                length: 20,
                length2: 30,
                lineStyle: {
                  width: 1
                }
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '16',
                fontWeight: 'bold'
              }
            },

            data: this.chartData
          }
        ]
      };
      this.chart.setOption(option);
    },
    initBarChart() {
      let option = {
        legend: {
          data: this.barlegend,
          top: "5%",
          textStyle: {
            color: "rgba(250,250,250,0.6)",
            fontSize: 12
          }
        },
        barWidth: 15,
        grid: {
          left: '25%'
        },
        xAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              color: "rgba(255,255,255,0.2)"
            }
          },
          axisTick: {
            show: false
          },
          axisLine: { //  改变x轴颜色
            lineStyle: {
              color: '#26D9FF'
            }
          },
          axisLabel: { //  改变x轴字体颜色和大小
            textStyle: {
              color: "rgba(250,250,250,0.6)",
              fontSize: 16
            }
          }
        },
        yAxis: {
          type: 'category',
          data: this.baryAxis,
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: { //  改变y轴颜色
            lineStyle: {
              color: '#26D9FF'
            }
          },
          axisLabel: { //  改变y轴字体颜色和大小
            textStyle: {
              color: "rgba(250,250,250,0.6)",
              fontSize: 16
            }
          }
        },
        series: [
          {
            type: 'bar',
            name: "网络婚恋、交友类（非杀猪盘类）",
            itemStyle: {
              normal: {
                label: {
                  show: false, //开启显示
                  position: 'right', //在上方显示
                  textStyle: { //数值样式
                    color: "rgba(250,250,250,0.6)",
                    fontSize: 16,
                    fontWeight: 600
                  }
                },
                color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                  offset: 0,
                  color: 'rgba(61,126,235,1)'
                }, {
                  offset: 1,
                  color: 'rgba(61,126,235,0)'
                }]),
                borderWidth: 2,
                barBorderRadius: 15
              }
            },
            data: [75,56,43,28,40] // 示例数据
          },
          {
            type: 'bar',
            name: "虚假理财类",
            itemStyle: {
              normal: {
                label: {
                  show: false, //开启显示
                  position: 'right', //在上方显示
                  textStyle: { //数值样式
                    color: "rgba(250,250,250,0.6)",
                    fontSize: 16,
                    fontWeight: 600
                  }
                },
                color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                  offset: 0,
                  color: 'rgba(15,197,243,1)'
                }, {
                  offset: 1,
                  color: 'rgba(15,197,243,0)'
                }]),
                borderWidth: 2,
                barBorderRadius: 15
              }
            },
            data: [34,20,32,17,21] // 示例数据
          },
          {
            type: 'bar',
            name: "虚假电商类",
            itemStyle: {
              normal: {
                label: {
                  show: false, //开启显示
                  position: 'right', //在上方显示
                  textStyle: { //数值样式
                    color: "rgba(250,250,250,0.6)",
                    fontSize: 16,
                    fontWeight: 600
                  }
                },
                color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                  offset: 0,
                  color: '#ffbc69'
                }, {
                  offset: 1,
                  color: 'rgba(255,99,71,0)'
                }]),
                borderWidth: 2,
                barBorderRadius: 15
              }
            },
            data: [20,23,18,12,7] // 示例数据
          }
        ]
      };
      this.barChart = this.$echarts.init(document.getElementById('person-container'))
      this.barChart.setOption(option)

    }
  },
  mounted () {
    this.initActive();
    //this.initChart();
    //this.initBarChart();
    window.addEventListener('resize', () => {
      this.chart && this.chart.resize();
      this.barChart && this.barChart.resize();
    });
  },
  beforeDestroy() {
    window.removeEventListener('resize', () => {
      this.chart && this.chart.resize();
      this.barChart && this.barChart.resize();
    });
    this.chart && this.chart.dispose();
    this.barChart && this.barChart.dispose();
  }
}
</script>

<style lang="stylus" scoped>
.active-interception-left{
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 20%;
}
  .chart-container {
    width: 100%;
    height: 100%;
    background-color: transparent;
  }
  #person-container {
    width: 100%;
    height: 100%;
    background-color: transparent;
  }
  .l-t{
    background-image: url("../../../assets/img/activeInterception/lt.png");
  }
  .l-b{
    background-image: url("../../../assets/img/activeInterception/lb.png");
  }
</style>